html,body{
    width:100%;
    height:100%;
    overflow:hidden
}
body{
    overflow:hidden;
    background:url(../img/xkbj.jpg) no-repeat center center;
}
.clear{
    clear:both;
}
a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
    color:red;
}
.div{
    width:100%;
    overflow:hidden;
    position:absolute;
    height:100%
}
.div>div{
    width:4px;
    height:4px;
    background:#cccccc;
    position:absolute;
    top:0px;
    right:0px;
    border-radius:100%
}
.div>div>div{
    width:3px;
    height:3px;
    background:#ccc;
    position:absolute;
    top:-2px;
    right:-2px;
}
.div>div>div>div{
    width:2px;
    height:2px;
    background:#ccc;
    position:absolute;
    top:-2px;
    right:-2px;
}
.div>div>div>div div{
    width:1px;
    height:1px;
    background:#ccc;
    position:absolute;
    top:-1px;
    right:-1px;
}
.main-page{
    margin:200px auto 0 auto;
    width:700px;
    height:300px;
}
.main-page .left,
.main-page .right{
    float:left;
}
.main-page .nav-back{
    width:60px;
    height:300px;
    background:#000;
    opacity:.3;
    filter:alpha(opacity=30);
}
.main-page .nav{
    position:relative;
    margin-top:-300px;
    width:60px;
    text-align:center;
    font-size:14px;
    font-family:"微软雅黑";
    color:#fff;
}
.main-page .nav div{
    height:32px;
    line-height:28px;
    cursor: pointer;
}
.main-page .nav div.on{
    background:#0094ea;
}
.main-page .right{
    width:620px;
    height:300px;
    margin-left:20px;
}
.main-page .content-back{
    width:620px;
    height:300px;
    background:#fff;
    opacity:.3;
}
.main-page .content{
    position:relative;
    width:600px;
    height:280px;
    margin-top:-300px;
    padding:10px;
    overflow:hidden;
}
.main-page .content div{
    width:600px;
    height:280px;
    margin-bottom:10px;
    background:rgba(0,0,0,0.5);
    line-height: 25px;
    color: #fff;
    padding-left: 5px;
}